/*
* @Author: Rosen
* @Date:   2018-02-01 16:19:36
* @Last Modified by:   Rosen
* @Last Modified time: 2018-02-04 21:39:59
*/
import React                from 'react';
import MUtil                from 'util/mm.jsx'
import Product              from 'service/product-service.jsx'
import PageTitle            from 'component/page-title/index.jsx';
import CategorySelector     from './category-selector.jsx';
import FileUploader         from 'util/file-uploader/index.jsx'
import RichEditor           from 'util/rich-editor/index.jsx'

import './save.scss';

const _mm           = new MUtil();
const _product      = new Product();
var newdele=''; 
var videodele=''; 

//添加商品页面 何 编辑页面

class ProductSave extends React.Component{
    constructor(props){
        super(props);
     //   newdele.splice(0,newdele.length); //清空数组  里面数据不能大写
        this.state = {
            id                  : this.props.match.params.pid, //获取product/router.jsx标题URL的pid
            name                : '',
            subtitle            : '',
            categoryId          : 0,  //平类ID
            parentCategoryId    : 0,  //品类ID所在的一级品类ID ，0表示自己就是一级品类
            mainImage           : [],
            imageHost           : '',
            price               : '',
    
            imageheight         : '',
            videoImage         : '',
            coverImage        : '',
            detail              : '', ////富文本内容
            status              : 1 ,//商品状态1为在售
          
        }
    }
    componentDidMount(){
        this.loadProduct();
    }
    // 加载商品详情
    loadProduct(){
        // 有id的时候，表示点击的是编辑，需要表单回填 ，如果没有ID ，是添加页面 ，返回没有任何数据
        if(this.state.id){
            //请求网络获取商品详情
            _product.getProduct(this.state.id).then((res) => {

             /*   let images = res.subImages.split(',');//将字符串转化为数组

              res.subImages = images.map((imgUri) => {//遍历所有商品封面图片给subimages赋值
                    return {
                        uri:imgUri,
                        url: res.imageHost + imgUri//url是subim数组里面的值定位为URL
                    }
                });*/
            
                res.defaultDetail = res.detail; //产品展示，详情页面
                this.setState(res);
                
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            });
        }
    }
    // 简单字段的改变，比如商品名称，描述，价格，库存
    onValueChange(e){
        let name = e.target.name,
            value = e.target.value.trim();
        this.setState({
            [name] : value
        });
    }
    // 品类选择器变化 。同级目录CategorySelector.jsx传值过来
    onCategoryChange(categoryId, parentCategoryId){
        this.setState({     //设置品类ID，和自己所在一级品类ID ，
            categoryId          : categoryId,
            parentCategoryId    : parentCategoryId
        });
    }
    // 富文本编辑器的变化
    onDetailValueChange(value){
        this.setState({
            detail: value
        });
    }
    
    // 上传图片成功   设置subimages的值
    onUploadSuccess(res){
      /*  let sub = this.state.subImages;
        sub.push(res);  //res表示新的，sub表示以前旧的，旧的加上新的*/
        this.setState({
           coverImage : res
        });
           
    }
   // 上传视频成功
   onUpVideoloadSuccess(res){
        this.setState({
          videoImage : res
        });
           
    }


    // 上传图片失败
    onUploadError(errMsg){
        _mm.errorTips(errMsg);
    }
    // 删除图片
    onImageDelete(e){
     //  let index       = parseInt(e.target.getAttribute('index'));
       /*     sub   = ;
           //dele包含删除的uri何RUI,获取只能遍历
    let dele=    sub.splice(0, 1); //删除从(索引值)开始之后的1个元素，  比如“abcd”用了sub.splice(1, 1) 删除的是 b,最后变成acd*/
        this.setState({
          coverImage : ""
        });

     //遍历  
   //dele.forEach( (value)=>{
        newdele=e;//赋值
    //  })  ;  
    }

  //删除视频
    onVedeoImageDelete(e){
        this.setState({
          videoImage : ""
        });
       videodele=e;//赋值
    }



 /*   getSubImagesString(){
        return this.state.subImages.map((image) => image.uri).join(','); //中间用,号分割
    }*/
 
    // 提交表单
    onSubmit(){

        let product = { //定义ldt，前面如：name 的可随意取名
            name        : this.state.name,
            subtitle    : this.state.subtitle,
            categoryId  : parseInt(this.state.categoryId),
            videoImage : this.state.videoImage,
            coverImage : this.state.coverImage,
            imageheight :this.state.imageheight,
            detail      : this.state.detail,
            price       : parseFloat(this.state.price),
            status      : this.state.status,
            
        },
//product-service.jsx 验证
        productCheckResult = _product.checkProduct(product);
        if(this.state.id){
            product.id = this.state.id;
        }
        // 表单验证成功
        if(productCheckResult.status){
            _product.saveProduct(product).then((res) => {
                _mm.successTips(res);
                this.props.history.push('/product/index');
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            });
        }
        // 表单验证失败
        else{
            _mm.errorTips(productCheckResult.msg);
        }
//let  imageString=newdele.join(",");
    //请求网络删除后台详情  第一个nUpClear必须为小写字母，坑
  if(newdele){
           console.log("开始请求后台了") ;
            _product.onUpClear(newdele).then((res) => {
                //后台删除成功
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            });
        }
          if(videodele){
           console.log("开始请求后台了") ;
            _product.onUpClear(videodele).then((res) => {
                //后台删除成功
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            });
        }
      
        
    }
    render(){
        return (
            <div id="page-wrapper">
                <PageTitle title={this.state.id ? '编辑商品' : '添加商品'} />
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品名称</label>
                        <div className="col-md-5">
                            <input type="text" className="form-control" 
                                placeholder="请输入商品名称"
                                name="name"
                                value={this.state.name}
                                onChange={(e) => this.onValueChange(e)}/>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品描述</label>
                        <div className="col-md-5">
                            <input type="text" className="form-control" 
                                placeholder="请输入商品描述" 
                                name="subtitle"
                                value={this.state.subtitle}
                                onChange={(e) => this.onValueChange(e)}/>
                        </div>
                    </div>
                  <div className="form-group">
                        <label className="col-md-2 control-label">图片高度</label>
                        <div className="col-md-5">
                            <input type="text" className="form-control" 
                                placeholder="请输入图片高度（目前只能填500,600两种值）" 
                                name="imageheight"
                                value={this.state.imageheight}
                                onChange={(e) => this.onValueChange(e)}/>
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">所属分类</label>
                        <CategorySelector 
                            categoryId={this.state.categoryId}
                            parentCategoryId={this.state.parentCategoryId}
                            onCategoryChange={(categoryId, parentCategoryId) => this.onCategoryChange(categoryId, parentCategoryId)}/>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品价格</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control" 
                                    placeholder="价格" 
                                    name="price"
                                    value={this.state.price}
                                    onChange={(e) => this.onValueChange(e)}/>
                                <span className="input-group-addon">元</span>
                            </div>
                        </div>
                    </div>
           
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品封面图片</label>
                        <div className="col-md-10">
                            {
                               /* 如果subimages有值，证明有图片，就删除图片，如果suiamgs没值，就显示请上传封面图片*/
                                this.state.coverImage? (
                                      /*  调用同级目录样式save.scss 限制图片宽高 image.url包含了名称的全路径 */
                                    <div className="img-con" >
                                        <img className="img" src={this.state.imageHost +this.state.coverImage} />
                                        <i className="fa fa-close"  onClick={(e) => this.onImageDelete(this.state.coverImage)}></i>
                                    </div>
                                ) 
                                : (<div>请上传竖图片，不能为视频！</div>)
                            }
                        </div>
                        
                           <div>
                         {                      
                             /*选择图片按钮，  如果有一张了，就隐藏掉，没有的话就显示出来*/
                             this.state.coverImage?  (
                              <div></div>
                                ) 
                                : (  <div className="col-md-offset-2 col-md-10 file-upload-con">
                                  <FileUploader onSuccess={(res) => this.onUploadSuccess(res)}
                                  onError={(errMsg) => this.onUploadError(errMsg)}/>
                               
                               </div>)
                                    
                          
                        }
                         </div>

                    </div>


                  <div className="form-group">
                        <label className="col-md-2 control-label">商品视频介绍</label>
                        <div className="col-md-10">
                            {
                               /* 如果subimages有值，证明有图片，就删除图片，如果suiamgs没值，就显示请上传封面图片*/
                                this.state.videoImage ? (
                                      /*  调用同级目录样式save.scss 限制图片宽高 image.url包含了名称的全路径 */
                                    <div className="img-con" >
                                        <img className="img" src={this.state.imageHost +this.state.videoImage} />
                                        <i className="fa fa-close"  onClick={(e) => this.onVedeoImageDelete(this.state.videoImage)}></i>
                                    </div>
                                ) 
                                : (<div>请上传横视频，不能为图片！大小不能超过17M</div>)
                            }
                        </div>
                        
                           <div>
                         {                      
                             /*选择图片按钮，  如果有一张了，就隐藏掉，没有的话就显示出来*/
                             this.state.videoImage?  (
                              <div></div>
                                ) 
                                : (  <div className="col-md-offset-2 col-md-10 file-upload-con">
                                  <FileUploader onSuccess={(res) => this.onUpVideoloadSuccess(res)}
                                  onError={(errMsg) => this.onUploadError(errMsg)}/>
                               
                               </div>)
                                    
                          
                        }
                         </div>

                    </div>



                    <div className="form-group">
                        <label className="col-md-2 control-label">商品详情</label>
                        
                          <div className="col-md-10">
                          商品详情里：上传的图片不能为视频，更改后，目前要手动删掉服务器上的被删掉的图片，请确认被删掉的图片没有被其他地方引用才能删除！
                        </div>
                        <div className="col-md-10">
                            <RichEditor 
                                detail={this.state.detail}
                                defaultDetail={this.state.defaultDetail}
                                onValueChange={(value) => this.onDetailValueChange(value)}/>
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="col-md-offset-2 col-md-10">
                            <button type="submit" className="btn btn-primary" 
                                onClick={(e) => {this.onSubmit(e)}}>提交</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default ProductSave;